.contacts {
	padding: var(--gap-60) 0;
	margin: 0 0 var(--gap-160) 0;
}

.contactsTitle {
	margin: 0 0 var(--gap-lg) 0;
}
.accent {
	color: var(--red-accent);
}
.contactsDesc {
	margin: 0 0 20px 0;
	max-width: 550px;
	text-align: center;
}

.formWrapper {
	position: relative;
	display: grid;
	grid-auto-columns: auto 1fr auto;
	place-items: center;
}

.decorBlue {
	position: absolute;
	top: 55%;
	right: 15%;
	width: 3.125rem;
	height: 3.125rem;
	border: 5px dashed var(--accent-clr);
	border-radius: 50%;
}

.decorRed {
	position: absolute;
	top: 55%;
	left: 15%;
	width: 3.125rem;
	height: 3.125rem;
	border: 5px dashed var(--red-accent);
	border-radius: 50%;
}

.motionDiv {
	width: 100%;
	max-width: 34.6875rem;
}

.form {
	width: 100%;
	max-width: 34.6875rem;
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
}

.input,
.textarea {
	background: var(--bg-clr-secondary);
	border-radius: 6px;
	padding: var(--gap-sm) var(--gap-md);
	width: 100%;
}

.socialWrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.socialLinks {
	display: flex;
	gap: var(--gap-sm);
}

.socialIcon {
	width: 2.125rem;
	height: 2rem;
	fill: var(--text-clr-main);

	transition: fill 0.2s ease, scale 0.2s ease;
}

.socialIcon:hover {
	fill: var(--accent-clr);
	transform: scale(1.1);
}

@media screen and (max-width: 979px){
	.decorBlue{
		right: 5%;
	}
	.decorRed{
		left: 5%;
	}
}

@media screen and (max-width: 769px) {
	.decorBlue,
	.decorRed {
		display: none;
	}
}
